import React, { FC, useEffect } from 'react';
import { PageHeader, Descriptions, Button, Typography, Divider } from 'antd';
import { connect, RankModelState, ConnectProps } from 'umi';
import { parseTime } from '@/utils';
import {
  PlusCircleOutlined,
  PlayCircleOutlined,
  MessageOutlined,
  RightCircleOutlined,
  CloudDownloadOutlined,
  ShareAltOutlined,
} from '@ant-design/icons';
import styles from './content.less';
import SongList from '@/compoments/song-list/song-list';
import Comment from '@/compoments/comment/comment';

const { Paragraph } = Typography;

interface PageProps extends ConnectProps {
  rank: RankModelState;
  dispatch: any;
}

const Content: FC<PageProps> = (props: any) => {
  let { listData, topId } = props.rank;

  let dataSourceList: any = [];

  if (topId != '') {
    useEffect(() => {
      dataSource();
    }, [topId]);
  }

  let dataSource = () => {
    props.dispatch({
      type: 'rank/getListData',
      payload: {
        id: topId,
      },
    });
  };

  listData?.tracks.forEach((item: any, index: number) => {
    let obj = {
      id: item.id,
      title: item.name,
      avatar: item.al.picUrl,
      description: item.ar[0].name,
      duration: item.dt,
    };
    dataSourceList.push(obj);
  });

  return (
    <div>
      <PageHeader
        title={listData?.name}
        className="site-page-header"
        subTitle={parseTime(listData?.updateTime, '{y}-{m}-{d}') + '更新'}
        extra={[
          <Button key="3" type="primary">
            <PlayCircleOutlined />
            播放全部
          </Button>,
          <Button key="2">
            <PlusCircleOutlined />
            收藏
          </Button>,
          <Button key="1">
            <MessageOutlined />
            评论
          </Button>,
        ]}
        avatar={{ src: listData?.coverImgUrl }}
      >
        <Paragraph>{listData?.description}</Paragraph>
        <Descriptions size="small" column={4}>
          <Descriptions.Item label="播放量">
            <a>{listData?.playCount}</a>次
          </Descriptions.Item>
          <Descriptions.Item label="收藏量">
            {listData?.subscribedCount}
          </Descriptions.Item>
          <Descriptions.Item label="分享次数">
            {listData?.shareCount}
          </Descriptions.Item>
          <Descriptions.Item label="评论数">
            {listData?.commentCount}
          </Descriptions.Item>
        </Descriptions>
      </PageHeader>
      <Divider className={styles.hr} />
      <SongList dataSourceList={dataSourceList}></SongList>
      <Comment id={listData?.id} type={'playlist'}></Comment>
    </div>
  );
};

export default connect(({ rank }: { rank: RankModelState }) => ({ rank }))(
  Content,
);
